<template>
	<Modal :title="title" v-model="visible" width="920" :footer-hide="true" @on-cancel="visible = false">
		<Card>
      <div v-if="commentData.length > 0">
        <div v-for="(item, index) in commentData" :key="index">
          <div>
            <div style="display: flex;align-items: center;justify-content: space-between">
              <div style="display: flex;align-items: center">
                <img :src="item.topCommentVo.userAvatar" alt="" style="width: 40px;height: 40px;border-radius: 50%;">
                <span style="margin-left: 15px;font-weight: 550;">{{ item.topCommentVo.userName }}</span>
                <span style="margin-left: 15px;color: #999999">{{ item.topCommentVo.replyTime }}</span>
              </div>
              <Button type="text" style="color: #f00" @click="delComment(item.topCommentVo)">删除</Button>
            </div>
            <div style="margin-top: 15px;line-height: 24px;">评论内容：{{ item.topCommentVo.content }}</div>
          </div>
          <div v-if="item.commentReply !== null" style="padding: 0 30px;">
            <div></div>
            <div v-for="(item2, index2) in item.commentReply" :key="index2">
              <Divider />
              <div>
                <div style="display: flex;align-items: center;justify-content: space-between;">
                  <div style="display: flex;align-items: center;">
                    <img :src="item.commentReply === null ? '' : item2.userAvatar" alt="" style="width: 30px;height: 30px;border-radius: 50%;">
                    <span style="margin-left: 5px;">回复</span>
                    <span style="margin-left: 5px;font-weight: 550;">{{ item.commentReply === null ? '' : item2.replyUserName }}</span>
                    <span style="margin-left: 15px;color: #999999">{{ item.commentReply === null ? '' : item2.replyTime }}</span>
                  </div>
                  <Button type="text" style="color: #f00" @click="delComment(item2)">删除</Button>
                </div>
                <div style="margin-top: 15px;line-height: 24px;">回复内容：{{ item.commentReply === null ? '' : item2.content }}</div>
              </div>
            </div>
          </div>
          <Divider />
        </div>
      </div>
			<div v-else style="text-align: center;">暂无评论！</div>
      <Row type="flex" justify="end" class="page">
        <Page
            :current="searchForm.pageNumber"
            :total="total"
            :page-size="searchForm.pageSize"
            @on-change="changePage"
            @on-page-size-change="changePageSize"
            :page-size-opts="[10, 20, 50]"
            size="small"
            show-total
            show-elevator
            show-sizer
        ></Page>
      </Row>
		</Card>
	</Modal>
</template>

<script>
import { getCommentByPostId, delCommentById } from '@/api/new.js';
export default {
	name: 'post',
	props: {
		value: {
			type: Boolean,
			default: false
		},
		data: {
			type: Object
		}
	},
	data() {
		return {
			visible: this.value,
			title: '',
			submitLoading: false,
			loading: false,
			maxHeight: 510,
			form: {},
      searchForm: {
			  pageNumber: 1,
        pageSize: 10,
        postId: ''
      },
			columns: [
				{
					title: '评论者',
					key: 'userName',
					minWidth: 120
				},
				{
					title: '回复者',
					key: 'replyUserName',
					minWidth: 180
				},
				{
					title: '内容',
					key: 'content',
					minWidth: 180
				},
				{
					title: '评论/回复时间',
					key: 'createTime',
					minWidth: 180
				}
			],
			commentData: [],
      total: 0,
		};
	},
	methods: {
		setCurrentValue(value) {
			// console.log(this.form)
			if (value === this.visible) {
				return;
			}
			this.title = '查看评论';
			// 回显
      this.searchForm.postId = this.data.id;
      this.init();
      this.visible = value;
		},

    init() {
      getCommentByPostId(this.searchForm).then(res => {
        if (res.code === 200) {
          this.commentData = res.data.records;
          this.total = res.data.total;
        } else {
          this.commentData = [];
          this.total = 0;
        }
      })
    },

    changePage(v) {
      this.searchForm.pageNumber = v;
      this.init();
    },

    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.init();
    },

    delComment(v) {
		  this.$Modal.confirm({
        title: '确认删除',
        content: '确认删除所选的评论吗？',
        loading: true,
        onOk:() => {
          delCommentById({ids: v.id}).then(res => {
            this.$Modal.remove();
            if (res.code === 200) {
              this.$Message.success('删除成功');
              this.init();
            } else {
              this.$Message.error(res.data.message);
            }
          })
        }
      })
    }
	},
	watch: {
		value(val) {
			this.setCurrentValue(val);
		},
		visible(value) {
			this.$emit('input', value);
		}
	},
	mounted() {
		// this.init();
	}
};
</script>

<style lang="less">
@import '../../../styles/drawer-common.less';
</style>
